<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">

</head>
<style>
    .spacingFoot {
        height: 50px;
    }

    .spacing {
        height: 30px;
    }
</style>
<body>
<div id="app">
    <el-container v-loading="loading">
        <el-main>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
            <el-form label-width="120px">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="客户名称">
                            <el-select v-model="companyB_id" filterable placeholder="请选择" style="width: 100%"
                                       @change="pickCompanyName" :disabled="disabled">
                                <el-option v-for="item in company_list" :key="item.id" :disabled="item.id == '1'"
                                           :label="item.company_name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="合同名称">
                            <el-select v-model="contract_id" filterable placeholder="请选择" style="width: 100%"
                                       @change="pickContractName">
                                <el-option v-for="item in contractList" :key="item.id" :label="item.contract_name"
                                           :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="SKU清单" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                        <el-button type="primary" style="margin-top: 12px;"
                                   @click="importSku">新增SKU<i class="el-icon-upload el-icon--right"></i></el-button>
<#if success == "success">
                        <el-button type="primary" style="margin-top: 12px;"
                                   @click="importNSLSku">新增SKU（非标库）<i class="el-icon-upload el-icon--right"></i>
                        </el-button>
                        </#if>
                    </el-col>
                </el-row>
                <br>
                <el-table :data="tableData"
                          class="tb-edit"
                          style="width: 100%"
                          tooltip-effect="dark" size="mini" border>
                    <el-table-column label="序号"
                                     type="index"
                                     width="50">
                    </el-table-column>
                    <el-table-column label="SKU编码" prop="sku_code" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuCode" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="SKU名称" prop="sku_name" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuName" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>

                    <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.modelAndParam" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="品牌" prop="sku_brand" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuBrand" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                <#--<el-table-column label="sku型号">-->
                <#--<template scope="scope">-->
                <#--<el-input size="small" v-model="scope.row.skuModel" :disabled="true"></el-input>-->
                <#--</template>-->
                <#--</el-table-column>-->
                    <el-table-column label="单位" prop="sku_unit" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuUnit" placeholder="请输入内容"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>

                    <el-table-column label="价格" prop="sku_contract_price" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input :disabled="true" v-model="scope.row.sku_contract_price"-->
                    <#--size="mini"-->
                    <#--@change="handleEdit(scope.$index, scope.row)"-->
                    <#--></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="数量" prop="purNum" width="140">

                        <template scope="scope">
                            <el-input v-model="scope.row.purNum" placeholder="1"
                                      size="mini" onkeypress="return checkNumber(event,this);"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="预计到货时间" prop="arriveTime" width="180">
                        <template scope="scope">
                            <el-date-picker
                                    v-model="scope.row.arriveTime"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="预计到货时间" size="mini"
                                    :picker-options="pickerOptions" >
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" prop="sku_remark" :show-overflow-tooltip=true>
                        <template scope="scope">
                            <el-input v-model="scope.row.sku_remark" size="mini"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80">
                        <template scope="scope">
                            <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <br><br>
                <el-row>
                    <el-col :xs="24" :sm="16" :md="14" :lg="8" :xl="8" class="spacingFoot">
                        <el-form-item label="商品总额：">
                            <span style="color:#F56C6C;font-size: 20px">￥{{sumPrice}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="save()">确认</el-button>
                    <a onclick="javascript:history.back(-1);">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>

            </el-form>
        </el-main>
    </el-container>
    <el-dialog title="请选择SKU" :visible.sync="dialogFormVisible" height="500px" width="90%" :fullscreen="true">
    <#--<el-input v-on:input="inputFunc" v-model="keySearch" placeholder="请输入搜索内容" style="width:50%">-->
    <#--<el-button slot="append" icon="el-icon-search" @click=search></el-button>-->
    <#--</el-input>-->
        <el-container style="height: 600px; border: 1px solid #eee">
            <el-aside style="background-color: rgb(238, 241, 246);min-width: 25%">
                <el-header style="text-align: left; font-size: 15px;height: 30px">
                    <span>商品分类</span>
                </el-header>
                <el-scrollbar style="height:calc(100% - 30px)">
                    <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false"
                             :highlight-current="true">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <el-button type="text" size="mini" @click="getSPUItem(data,node)">
                                    <span style="color:#606266;font-size: 14px"></i>{{
                                        node.label }}</span>
                                </el-button>
                            </span>
                    </el-tree>
                </el-scrollbar>
            </el-aside>
            <el-container>
                <div style="width:100%">
                    <el-input @keyup.enter.native="enterSKUSearch" v-model="keySearch" placeholder="请输入搜索内容"
                              style="width:50%">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                    <el-table ref="multipleTable" :data="skuList" tooltip-effect="dark" style="width: 100%" height="476"
                              @selection-change="handleSelectionChange" size="mini" border>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column label="序号"
                                         type="index"
                                         width="50">
                        </el-table-column>
                        <el-table-column prop="sku_name" label="材料名称" :show-overflow-tooltip=true>
                        </el-table-column>
                        <el-table-column prop="sku_code" label="材料编码" :show-overflow-tooltip=true>
                        </el-table-column>
                        <el-table-column prop="sku_slug_set" label="规格参数" :show-overflow-tooltip=true>
                        </el-table-column>
                        <el-table-column prop="sku_model" label="型号" :show-overflow-tooltip=true>
                        </el-table-column>
                        <el-table-column prop="sku_brand" label="品牌" :show-overflow-tooltip=true>
                        </el-table-column>
                        <el-table-column prop="sku_unit" label="单位" :show-overflow-tooltip=true>
                        </el-table-column>

                        <el-table-column prop="sku_contract_price" label="单价" :show-overflow-tooltip=true>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPage"
                                   :page-sizes="[100, 500, 1000]"
                                   :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                    <br>
                    <el-row>
                        <el-button type="primary" @click="checkOK">确定</el-button>
                        <el-button @click="checkCancel">取消</el-button>
                    </el-row>
                </div>
            </el-container>
        </el-container>

    </el-dialog>
    <#--<el-dialog title="请选择SKU" :visible.sync="dialogRationVisible" width="90%" :fullscreen="true">-->
        <#--<el-row>-->
            <#--<el-col :xs="14" :sm="14" :md="8" :lg="8" :xl="8">-->
                <#--<el-input placeholder="请输入内容" v-model="rationSearch">-->
                    <#--<el-button slot="append" icon="el-icon-search"></el-button>-->
                <#--</el-input>-->
            <#--</el-col>-->
        <#--</el-row>-->
        <#--<el-table ref="multipleTable" tooltip-effect="dark" style="width: 100%"-->
                  <#--:data="tables.slice((rationPageIndex-1)*rationPageSize,rationPageIndex*rationPageSize)"-->
                  <#--@selection-change="handleSelectionChange" size="mini" border>-->
            <#--<el-table-column type="selection" width="55">-->
            <#--</el-table-column>-->
            <#--<el-table-column label="序号"-->
                             <#--type="index"-->
                             <#--width="50">-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_name" label="材料名称" :show-overflow-tooltip=true>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_code" label="材料编码" :show-overflow-tooltip=true>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_slug_set" label="规格参数" :show-overflow-tooltip=true>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_model" label="型号" :show-overflow-tooltip=true>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_brand" label="品牌" :show-overflow-tooltip=true>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_unit" label="单位" :show-overflow-tooltip=true>-->
            <#--</el-table-column>-->
            <#--<el-table-column prop="sku_contract_price" label="单价" max-width="100">-->
            <#--</el-table-column>-->
        <#--</el-table>-->
        <#--<el-pagination-->
                <#--@size-change="rationSizeChange"-->
                <#--@current-change="rationCurrentChange"-->
                <#--:current-page="rationPageIndex"-->
                <#--:page-sizes="[100, 500, 1000]"-->
                <#--:page-size="rationPageSize"-->
                <#--layout="total, sizes, prev, pager, next, jumper"-->
                <#--:total="tables.length">-->
        <#--</el-pagination>-->
        <#--<br>-->
        <#--<el-row>-->
            <#--<el-button type="primary" @click="checkOK">确定</el-button>-->
            <#--<el-button @click="checkCancel">取消</el-button>-->
        <#--</el-row>-->
    <#--</el-dialog>-->
    <el-dialog title="请选择SKU(非标库)" :visible.sync="dialogNSLVisible" width="90%" :fullscreen="true">
        <el-input @keyup.enter.native="enterNSLSearch" v-model="NSLKeySearch" placeholder="请输入搜索内容" style="width:50%">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-table ref="multipleTable" :data="skuList" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange" size="mini" border>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="序号"
                             type="index"
                             width="50">
            </el-table-column>
            <el-table-column prop="sku_name" label="SKU名称" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column prop="sku_code" label="SKU编码" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column prop="sku_brand" label="品牌" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column prop="sku_unit" label="单位" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column prop="sku_slug_set" label="规格参数" :show-overflow-tooltip=true>
            </el-table-column>
            <el-table-column prop="sku_price" label="价格" :show-overflow-tooltip=true>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="NSLSizeChange" @current-change="NSLPageChange" :page-sizes="[100, 500, 1000]"
                       :page-size="NSLLimit" layout="total, sizes, prev, pager, next, jumper" :total="NSLTotal">
        </el-pagination>
        <br>
        <el-row>
            <el-button type="primary" @click="checkOK">确定</el-button>
            <el-button @click="checkCancel">取消</el-button>
        </el-row>
    </el-dialog>
    <el-dialog title="订单信息" :visible.sync="dialogOrderVisible" width="90%" :fullscreen="true">
        <el-steps :active="1" simple>
            <el-step title="确认订单信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
        </el-steps>
        <br>
        <el-form label-width="150px">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="项目名称">
                        <el-select v-model="project_name" filterable placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in project_list"
                                    :key="item.project_name"
                                    :label="item.project_name"
                                    :value="item.project_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="客户联系人">
                        <el-select v-model="user_id" filterable placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.user_name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="供应商联系人">
                        <el-select v-model="buyer" filterable placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in buyerList"
                                    :key="item.user_name"
                                    :label="item.user_name"
                                    :value="item.user_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="收货人">
                        <el-select v-model="consignee_information" filterable placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.user_name"
                                    :label="item.user_name"
                                    :value="item.user_name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="收货地址及联系方式">
                        <el-input v-model="consignee_address"></el-input>
                    </el-form-item>
                </el-col>
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">-->
            <#--<el-form-item label="商品总额">-->
            <#--<el-input v-model="sku_sum_price"></el-input>-->
            <#--</el-form-item>-->
            <#--</el-col>-->
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <br>
        <el-steps :active="1" simple>
            <el-step title="确认商品信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
        </el-steps>
        <br>
        <el-table :data="tableData"
                  class="tb-edit"
                  style="width: 100%"
                  tooltip-effect="dark" size="mini" border>
            <el-table-column label="序号"
                             type="index"
                             width="50">
            </el-table-column>
            <el-table-column label="材料编码" prop="sku_code" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input size="small" v-model="scope.row.skuCode" :disabled="true"></el-input>-->
            <#--</template>-->
            </el-table-column>
            <el-table-column label="材料名称" prop="sku_name" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input size="small" v-model="scope.row.skuName" :disabled="true"></el-input>-->
            <#--</template>-->
            </el-table-column>

            <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input size="small" v-model="scope.row.modelAndParam" :disabled="true"></el-input>-->
            <#--</template>-->
            </el-table-column>
            <el-table-column label="型号" prop="sku_model" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input size="small" v-model="scope.row.modelAndParam" :disabled="true"></el-input>-->
            <#--</template>-->
            </el-table-column>
            <el-table-column label="品牌" prop="sku_brand" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input size="small" v-model="scope.row.skuBrand" :disabled="true"></el-input>-->
            <#--</template>-->
            </el-table-column>
        <#--<el-table-column label="sku型号">-->
        <#--<template scope="scope">-->
        <#--<el-input size="small" v-model="scope.row.skuModel" :disabled="true"></el-input>-->
        <#--</template>-->
        <#--</el-table-column>-->
            <el-table-column label="单位" prop="sku_unit" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input size="small" v-model="scope.row.skuUnit" placeholder="请输入内容"-->
            <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
            <#--</template>-->
            </el-table-column>

            <el-table-column label="单价" prop="sku_contract_price" :show-overflow-tooltip=true>
            <#--<template scope="scope">-->
            <#--<el-input :disabled="true" v-model="scope.row.sku_contract_price"-->
            <#--size="mini"-->
            <#--@change="handleEdit(scope.$index, scope.row)"-->
            <#--></el-input>-->
            <#--</template>-->
            </el-table-column>
            <el-table-column label="数量" prop="purNum" width="140">
                <template scope="scope">
                    <el-input v-model="scope.row.purNum" placeholder="1"
                              size="mini" onkeypress="return checkNumber(event,this);"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="预计到货时间" prop="arriveTime" width="180">
                <template scope="scope">
                    <el-date-picker
                            v-model="scope.row.arriveTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="预计到货时间" size="mini"
                            :picker-options="pickerOptions" >
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="sku_remark" :show-overflow-tooltip=true>
                <template scope="scope">
                    <el-input v-model="scope.row.sku_remark" size="mini"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template scope="scope">
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button type="primary" @click="submitForm">提交</el-button>
    </el-dialog>
</div>
</body>
</html>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    //限制输入数字，而且只能输入两位小数
    function checkNumber(e, txt) {
        var key = window.event ? e.keyCode : e.which;
        var keychar = String.fromCharCode(key);
        reg = /\d|\./;
        var result = reg.test(keychar);
        if (result) {
            if (e.keyCode == 46)
                result = !(txt.value.split('.').length > 1);
            else
                result = !(txt.value.split('.').length > 1 && txt.value.split('.')[1].length > 1);
        }
        if (!result) {
            return false;
        }
        else {
            return true;
        }
    }
</script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                buyer: '',
                consignee_information: '',
                consignee_address: '',
                remark: '',
                project_name: '',
                order_name: '默认订单名称',
                treeId: '',
                priceSummaryId: '',
                companyB_id: '',
                contractList: [],
                project_list: [],
                contract_id: '',
                user_id: '',
                company_list: [],
                userList: [],
                buyerList: [],
                treeData: [],
                tableData: [],
                sku_sum_price: 0,
                //当前页
                page: 1,
                //每页数量
                limit: 100,
                total: 0,
                keySearch: '',
                dialogFormVisible: false,
                dialogNSLVisible: false,
                dialogOrderVisible: false,
                // dialogRationVisible: false,
                skuList: [],
                NSLTotal: 0,
                NSLPage: 1,
                NSLLimit: 100,
                NSLKeySearch: '',
                admin: '${admin}',
                disabled: false,
                // rationSearch: '',
                // rationPageSize: 100,
                // rationPageIndex: 1,
            }
        },
        //实时计算
        computed: {
            //计算商品总额
            sumPrice() {
                let sumPrice = 0;
                this.tableData.forEach((item) => {
                    sumPrice += Number(item.sku_contract_price) * Number(item.purNum);
                });
                this.sku_sum_price = sumPrice.toFixed(2);
                return this.sku_sum_price;
            },
        },
        methods: {
            // rationSizeChange(val) {
            //     this.rationPageSize = val
            // },
            // rationCurrentChange(val) {
            //     this.rationPageIndex = val
            // },
            getUserList() {
                $.ajax({
                    url: '/user/getUserListByCompanyId.json?companyId=' + this.companyB_id,
                    type: 'get',
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.userList = result.data;
                        } else {
                        }
                    }
                });
            },
            getBuyerList() {
                $.ajax({
                    url: '/user/getUserListByGroupId.json?groupId=${group_id}',
                    type: 'get',
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.buyerList = result.data;
                        } else {
                        }
                    }
                });
            },
            pickContractName(id) {
                let obj = {};
                obj = this.contractList.find((item) => {
                    return item.id === id;//筛选出匹配数据
                });
                this.priceSummaryId = obj.tablePrice_id;
                this.tableData = [];
            },
            //获取当前选中客户的有效合同列表
            pickCompanyName(company_id) {
                $.ajax({
                    url: '/contract/findOneContract.json?companyB_id='+company_id,
                    // url: '/contract/getContractListByCompanyId.json?company_id=' + company_id,
                    type: 'get',
                    dataType: 'json',
                    success: (result)=> {
                        if (result.ret) {
                            this.contractList.push(result.data);
                        } else {
                            this.$message.error('获取合同列表失败，请稍后重试');
                        }
                        this.contract_id = '';
                        this.tableData = [];
                    }
                });
            },
            handleDelete(index, row) {
                if (!this.tableData[index].editable) {
                    this.tableData.splice(index, 1);
                    return false;
                }
                var boolean = false;
                var msg = '';
                var orderBill_id = this.orderBill_id;
                var price = this.sales_order_price;
                var sku = {
                    sku_code: row.sku_code,
                    sku_name: row.sku_name,
                    sku_brand: row.sku_brand,
                    sku_unit: row.sku_unit,
                    sku_slug_set: row.sku_slug_set,
                    sku_model: row.sku_model,
                    sku_cost_price: row.sku_cost_price,
                    sku_official_price: row.sku_official_price,
                    sku_contract_price: row.sku_contract_price,
                    purNum: row.purNum,
                    arriveTime: row.arriveTime
                }
                var map = {
                    orderBill_id: orderBill_id,
                    orderBill_flow: "25",
                    price: price,
                    type: "del",
                    context: sku
                };
                $.ajax({
                    url: "/Order/baseBillController/updateSkuRow.json",
                    type: 'POST',
                    data: {
                        obj: JSON.stringify(map)
                    },
                    async: false,
                    success: function (data) {
                        if (data.ret) {
                            boolean = data.ret;
                        } else {
                            msg = data.msg;
                        }
                    }
                });
                if (boolean) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.tableData.splice(index, 1);
                } else {
                    this.$message({
                        message: msg,
                        type: 'warning'
                    });
                    return false;
                }

            },
            checkOK() {
                this.dialogFormVisible = false;
                this.dialogNSLVisible = false;
                this.echo = this.compare(this.multipleSelection, this.tableData).onlySrc1;
                this.tableData = this.tableData.concat(this.echo);
            },
            checkCancel() {
                this.dialogFormVisible = false;
                this.dialogNSLVisible = false;
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                var select = JSON.parse(JSON.stringify(val));
                select.forEach((ele) => {
                    ele.purNum = 1;
                    ele.arriveTime = new Date();
                })
                this.multipleSelection = select;
            },
            importSku() {
                // if (this.contract_type == "realTime") {
                    this.dialogFormVisible = true;
                    // 自动获取分类数据
                    $.ajax({
                        // url: '/shopping/tree.json',
                        url: '/contract/getCatalogByCompanyId.json?contract_id='+this.contract_id+'&priceSummaryId='+this.priceSummaryId,
                        // url: 'http://192.168.1.138:8080/Contract/testContract/getCatalogByCompanyId.json?contract_id=' + this.companyB_id+'&priceSummaryId='+this.priceSummaryId,
                        <#--url: '${url}/pzCfgCataLogController/pzCfgCataLogTree.json',-->
                        type: 'get',
                        success: (result) =>{
                            if (result.ret) {
                                this.treeData = result.data;
                                this.getRealTimeSkuList();
                            }else{
                                this.$message.error('请求失败，请稍后重试');
                            }
                        }
                    });

            },
            getSPUItem(data) {
                this.treeId = data.id;
                this.keySearch = '';
                this.getRealTimeSkuList();
            },
            handleSizeChange(val) {
                this.limit = val;
                this.getRealTimeSkuList();
            },
            handleCurrentPage(val) {
                this.page = val;
                this.getRealTimeSkuList();
            },
            getRealTimeSkuList() {
                $.ajax({
                    url: "/contract/contractSummaryDetailList.json?",
                    // url: "/order/getRealTimeSkuListByTreeId.json?treeId=" + treeId + "&limit=" + limit + "&page=" + page + "&contractId=" + contractId + "&key=" + key,
                    type: "get",
                    data: {
                        cls: this.treeId,
                        limit: this.limit,
                        page: this.page,
                        contract_id: this.contract_id,
                        key: this.keySearch,
                    },
                    dataType: 'json',
                    success: (result) =>{
                        if (result.ret) {
                            this.skuList = result.data;
                            this.total = result.count;
                        } else {
                            this.$message.error('请求失败，请稍后重试');
                        }
                    }
                });
            },
            //回车监听事件获取输入内容
            enterSKUSearch: function (event) {
                this.keySearch = event.target.value;
                this.page = 1;
                this.limit = 100;
                this.treeId = '';
                this.getRealTimeSkuList();
            },
            enterNSLSearch: function (event) {
                this.NSLLimit = 100;
                this.NSLPage = 1;
                this.getNSLSkuList();
            },
            importNSLSku() {
                this.dialogNSLVisible = true;
                this.getNSLSkuList();
            },
            getNSLSkuList() {
                var skuList = [];
                var boolean = false;
                var msg = '';
                var page = this.NSLPage;
                var limit = this.NSLLimit;
                var key = this.NSLKeySearch;
                var NSLTotal = this.NSLTotal;
                $.ajax({
                    url: '/dataCenter/nslList.json?page=' + page + '&limit=' + limit + '&param=' + key,
                    <#--url: '${url}/nsl/list.json?page=' + page + '&limit=' + limit + '&key=' + key,-->
                    type: "GET",
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        if (data.ret) {
                            boolean = data.ret;
                            skuList = data.data;
                            NSLTotal = data.count;
                        } else {
                            msg = data.msg;
                        }
                    }
                });
                if (boolean) {
                    this.skuList = skuList;
                    for (var i = 0; i < this.skuList.length; i++) {
                        this.skuList[i].sku_contract_price = this.skuList[i].sku_price;
                        this.skuList[i].sku_official_price = this.skuList[i].sku_price;
                        this.skuList[i].sku_cost_price = this.skuList[i].sku_price;
                        this.skuList[i].purNum = 1;
                    }
                    this.NSLTotal = NSLTotal;
                } else {
                    this.$message({
                        message: msg,
                        type: 'warning'
                    });
                    return false;
                }

            },
            NSLSizeChange(val) {
                this.NSLLimit = val;
            },
            NSLPageChange(val) {
                this.NSLPage = val;
            },
            save() {
                if (this.tableData.length == 0) {
                    this.$message.error("商品不可以为空哦！");
                } else {
                    this.projectList();
                    this.getUserList();
                    this.getBuyerList();
                    this.dialogOrderVisible = true;
                }
            },
            submitForm() {
                this.loading = true;
                var sku_sum_price = this.sku_sum_price;
                var buyer = this.buyer;
                var consignee_information = this.consignee_information;
                var consignee_address = this.consignee_address;
                var remark = this.remark;
                var order_name = this.order_name;
                var context = JSON.stringify(this.tableData);
                var company_id = this.companyB_id;
                var project_name = this.project_name;
                var user_id = this.user_id;
                if (this.tableData.length == 0) {
                    this.$message.error("商品不可以为空哦！");
                    this.loading = false;
                    return false;
                }
                if (buyer === "") {
                    this.$message.error("供应商联系人不可以为空哦！");
                    this.loading = false;
                    return false;
                }
                if (user_id === "") {
                    this.$message.error("客户联系人不可以为空哦！");
                    this.loading = false;
                    return false;
                }
                if (project_name === "") {
                    this.$message.error("项目名称不可以为空哦！");
                    this.loading = false;
                    return false;
                }
                if (consignee_information === "") {
                    this.$message.error("收货人及联系方式不可以为空哦！");
                    this.loading = false;
                    return false;
                }
                this.dialogOrderVisible = false;
                $.ajax({
                    url: '/order/addOrder.json',
                    type: 'POST',
                    data: {
                        company_id: company_id,
                        sku_sum_price: sku_sum_price,
                        buyer: buyer,
                        consignee_information: consignee_information,
                        consignee_address: consignee_address,
                        remark: remark,
                        order_name: order_name,
                        context: context,
                        project_name: project_name,
                        user_id: user_id,
                    },
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        this.loading = false;
                        if (result.ret) {
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            setTimeout(function () {
                                window.location.href = "/order/orderList.page";
                            }, 1000);
                        } else {
                            this.$message.error(result.msg);
                        }
                    }
                });
            },
            projectList() {
                $.ajax({
                    url: '/project/projectList.json?company_id=' + this.companyB_id,
                    type: 'get',
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.project_list = result.data.list;
                        } else {
                            this.$message({
                                message: '未找到项目数据，请重试',
                                type: 'error'
                            });
                        }
                    }
                });
            },
            //初始化得的企业列表
            companyList() {
                var msg = "";
                var bool = false;
                var resultData = '';
                $.ajax({
                    url: '/company/select.json',
                    type: 'get',
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.ret) {
                            bool = true;
                            resultData = result.data;
                        } else {
                            msg = result.msg;
                        }
                    }
                });
                if (bool) {
                    this.company_list = resultData;
                    if (this.admin === 'false') {
                        resultData.forEach((ele) => {
                            this.companyB_id = ele.id;
                        })
                        this.pickCompanyName(this.companyB_id);
                        this.disabled = true;
                    }
                } else {
                    this.$message({
                        message: '系统异常，企业列表获取异常，请重试.',
                        type: 'error'
                    });
                }
            },
            compare(src1, src2) {
                let arr1 = src1;
                let arr2 = src2;
                console.log();
                let searcher1 = {};
                let searcher2 = {};
                // 用arr组成索引
                arr1.forEach((ele, index) => {
                    searcher1[ele.sku_code] = index;
                });
                arr2.forEach((ele, index) => {
                    searcher2[ele.sku_code] = index;
                });

                // 过滤
                let samePart = arr2.filter(ele => {
                    const result = searcher1[ele.sku_code];
                    return result == undefined ? false : true;
                });
                let onlySrc2 = arr2.filter(ele => {
                    const result = searcher1[ele.sku_code];
                    return result == undefined ? true : false;
                });
                let onlySrc1 = arr1.filter(ele => {
                    const result = searcher2[ele.sku_code];
                    return result == undefined ? true : false;
                });

                return {
                    samePart,
                    onlySrc1,
                    onlySrc2
                };
            },
        },
        /** 初始化参数的时候使用 */
        async mounted() {
            this.companyList();
        }
    });

</script>
<#--<script type="text/javascript" src="/base/js/salesOrderDetail.js"></script>-->


